<template>
  <div class="content-wrapper-view">
    <div class="content-wrapper-body">
      <div class="filter-wrapper">
        <el-form ref="filterForm" :model="listQuery" :inline="true">
          <el-form-item prop="roleName" size="medium">
            <el-input
              v-model="listQuery.roleName"
              placeholder="关键字"
            ></el-input>
          </el-form-item>

          <el-button type="primary" size="medium" icon="el-icon-search"
            >搜索</el-button
          >
          <el-button type="primary" size="medium" icon="el-icon-mars-reset"
            >重置</el-button
          >
          <el-button type="primary" size="medium" icon="el-icon-plus"
            >添加</el-button
          >
          <el-button type="danger" size="medium" icon="el-icon-delete"
            >批量删除</el-button
          >
        </el-form>
      </div>

      <zk-table
        ref="table"
        sum-text="合计"
        index-text="#"
        :data="data"
        :columns="columns"
        :stripe="false"
        :border="true"
        :show-header="true"
        :show-summary="false"
        :show-row-hover="true"
        :show-index="false"
        :tree-type="true"
        :is-fold="true"
        :expand-type="false"
        :selection-type="false"
      >
        <template slot="likes" scope="scope">
          {{ scope.row.likes.join(",") }}
        </template>
      </zk-table>
    </div>
  </div>
</template>

<script>
import {
  created,
  updated,
  deleted,
  selectOne,
  selectList,
  selectTree
} from "@/api/system/menu";
export default {
  name: "Table",

  data() {
    return {
      listQuery: {},
      tree: [],
      data: [],
      columns: [
        {
          label: "菜单名称",
          prop: "name",
          width: "300px"
        },{
          label: "页面组件",
          prop: "component",
          minWidth: "50px"
        },{
          label: "状态",
          prop: "status",
          minWidth: "50px"
        },{
          label: "请求方式",
          prop: "method",
          minWidth: "50px"
        },{
          label: "排序",
          prop: "sort",
          minWidth: "50px"
        },{
          label: "操作",
          prop: "action",
          minWidth: "50px"
        }
      ]
    };
  },
  created() {
      this.getTree()
  },
  methods: {
    getTree() {
      //获取菜单树
      selectTree().then(response => {
        this.tree = response.data.data;
        this.data = this.tree
        console.log(this.tree);
      });
    }
  }
};
</script>

<style scoped>
</style>
